<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器实例</title>
</head>
<body>
  <div id="app">
    开头:<input type="number" v-model.number="begin"> <br>
    身份证号: <input type="number" name="" id="" v-model="sfzh"> <br>
    <h2>{{sfzh|hidden(begin,4)}}</h2>
  </div>

  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        sfzh:'',
        begin:2
      },
      /*filter中找不到this，只能在method里面找到*/
      filters:{
        hidden(val,begin,end){
          if(val.length<=begin) {
            return val
          }
          let s1 = val.slice(0,begin)
          console.log(begin+end+1);
          
          if(val.length<(begin+end+1)) {
            for(let i=0;i<(val.length-begin);i++) {
              s1+="*";
            }
            return s1;
          }
          let s2 = val.slice(val.length-4)
          for(let i=0;i<(val.length-begin-end);i++) {
            s1+="*";
          }
          s1+=s2;
          return s1;
        }
      }
    })
  </script>
</body>
</html>